<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge" ><title>vPanel - Calendar</title><link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold" media="screen" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?family=PT+Serif+Caption" media="screen" rel="stylesheet" type="text/css" >
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/grid.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/elfinder.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.ui.datatables.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.slidernav.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/jquery.fullcalendar.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/ui.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/portlet.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/jquery.ui.uniform.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/ui/default-ui/colors/jquery.ui.colors.default.css" media="screen" rel="stylesheet" type="text/css" class="uicolor" >
<link href="css/forms.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/prettify.css" media="screen" rel="stylesheet" type="text/css" >
<!--[if lt IE 8]> <link href="css/ie.css" media="screen" rel="stylesheet" type="text/css" ><![endif]--><!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.selectors.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/overlay.apple.js"></script>
<script type="text/javascript" src="js/jquery.ui.min.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/jquery.slidernav.js"></script>
<script type="text/javascript" src="js/jquery.fullcalendar.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/elfinder.full.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<!--[if lt IE 9]> <script type="text/javascript" src="js/selectivizr.js"></script><![endif]-->
<!--[if lt IE 8]> <script type="text/javascript" src="js/ie.js"></script><![endif]-->
<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#quick-search" ).autocomplete({
			source: availableTags
		});
	});
</script>

<!-- LOADING SCRIPT -->
<script>
$(window).load(function(){
    $("#loading").fadeOut(function(){
        $(this).remove();
        $('body').removeAttr('style');
    });
});
</script>

<style type = "text/css">
    #container {position: absolute; top:50%; left:50%;}
    #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
    #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
    #loadinggraphic {margin-right: 0.2em; margin-bottom:-2px;}
    #loading {background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0; z-index: 9999;}
</style> 
<!-- LOADING SCRIPT END -->

</head>
<body>

    <div id="loading"> 
        <script type = "text/javascript"> 
            document.write("<div id='container'><p id='content'>" +
                           "<img id='loadinggraphic' width='16' height='16' src='images/ajax-loader-eeeeee.gif' /> " +
                           "Loading...</p></div>");
        </script> 
    </div> 
    
    <div id="wrapper" class="clearfix">
        <header class="container_8 clearfix">
            <div class="grid_8">
                <h1>vPanel</h1>
                <form class="fr">
                    <input id="quick-search" type="text" placeholder="Search..." />
                </form>
                <nav>
                    <ul class="sf-menu clearfix">
                        <li class="active"><a href="dashboard.htm">Dashboard</a>
                            <ul>
                                <li><a href="activity.htm">Activity</a></li>
                                <li><a href="files.htm">Files</a></li>
                                <li><a href="calendar.htm">Calendar</a></li>
                                <li><a href="contacts.htm">Contacts</a></li>
                            </ul>
                        </li>
                        <li ><a href="#">Features</a>
                            <ul>
                                <li><a href="wysiwyg.htm">WYSIWYG</a></li>
                                <li><a href="forms.htm">Forms</a></li>
                                <li><a href="widgets.htm">Widgets</a></li>
                                <li><a href="tables.htm">Tables</a></li>
                                <li><a href="styles.htm">Styles</a></li>
                                <li><a href="navicons.htm">Nav Icons</a></li>
                                <li><a href="grid.htm">Grid System</a></li>
                            </ul>
                        </li>
                        <li ><a href="themes.htm">Themes</a></li>
                        <li><a href="#">Sample Menu</a>
                            <ul>
                                <li><a href="#">menuitem 1</a></li>
                                <li><a href="#">menuitem 2</a></li>
                                <li><a href="#">menuitem 3</a></li>
                                <li><a href="#">menuitem 4</a></li>
                                <li><a href="#">Sample Submenu</a>
                                    <ul>
                                        <li><a href="#">submenu 1</a></li>
                                        <li><a href="#">submenu 2</a></li>
                                        <li><a href="#">submenu 3</a></li>
                                        <li><a href="#">submenu 4</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="fr"><a href="#" class="arrow-down">hfh</a>
                            <ul>
                                <li><a href="account.htm">Account</a></li>
                                <li><a href="account.htm">Users</a></li>
                                <li><a href="account.htm">Groups</a></li>
                                <li><a href="account.htm">Help</a></li>
                                <li><a href="logout.htm">Sign out</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        
        <section>
            <div class="container_8 clearfix">                

                <!-- Main Section -->

<script type='text/javascript'>



	$(document).ready(function() {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
        var eventtitle = $( "#event-title" )
        var estart, eend, eallDay;

		var calendar = $('#calendar').fullCalendar({
            theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
            selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
                estart=start;
                eend=end;
                eallDay=allDay;
                $("#create-event-form").dialog("open");
			},
			editable: true,
			events: [
				{

					title: 'All Day Event',

					start: new Date(y, m, 1)

				},

				{

					title: 'Long Event',

					start: new Date(y, m, d-5),

					end: new Date(y, m, d-2)

				},

				{

					id: 999,

					title: 'Repeating Event',

					start: new Date(y, m, d-3, 16, 0),

					allDay: false

				},

				{

					id: 999,

					title: 'Repeating Event',

					start: new Date(y, m, d+4, 16, 0),

					allDay: false

				},

				{

					title: 'Meeting',

					start: new Date(y, m, d, 10, 30),

					allDay: false

				},

				{

					title: 'Lunch',

					start: new Date(y, m, d, 12, 0),

					end: new Date(y, m, d, 14, 0),

					allDay: false

				},

				{

					title: 'Birthday Party',

					start: new Date(y, m, d+1, 19, 0),

					end: new Date(y, m, d+1, 22, 30),

					allDay: false

				},

				{

					title: 'Click for Google',

					start: new Date(y, m, 28),

					end: new Date(y, m, 29),

					url: 'http://google.com/'

				}

			]

		});
        
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
		$( "#create-event-form" ).dialog({
			autoOpen: false,
			height: 128,
			width: 350,
			modal: true,
            resizable: false,
            hide: 'fade',
            show: 'fade',
			buttons: {
				"Create Event": function() {
					var bValid = true;
					eventtitle.removeClass( "ui-state-error" );

					bValid = bValid && eventtitle.val() != '';

					if ( bValid ) {
                        var title = eventtitle.val();
                        calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: estart,
                                end: eend,
                                allDay: eallDay
                            },
                            true // make the event "stick"
                        );

                        calendar.fullCalendar('unselect');
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
            close: function() {
                eventtitle.val("").removeClass( "ui-state-error" );
                estart=eend=eallDay=null;
            }
		});
	});



</script>

                <section class="main-section grid_8">
                    <nav>
                        <a class="chevron" href="#">&raquo;</a>
                        <ul>
                            <li><a href="dashboard.htm" class="navicon-house">Overview</a></li>
                            <li><a href="activity.htm" class="navicon-ekg">Activity</a></li>
                            <li><a href="files.htm" class="navicon-cabinet">File Manager</a></li>
                            <li class="current"><a href="calendar.htm" class="navicon-calendar">Calendar</a></li>
                            <li><a href="contacts.htm" class="navicon-id-card">Contacts</a></li>
                        </ul>
                    </nav>

                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix">
                                <li><a href="account" class="button" data-icon-primary="ui-icon-wrench" data-icon-only="true">Options</a></li>
                                <li><a href="documentation/index.html" class="button help" rel="#overlay" data-icon-primary="ui-icon-help" data-icon-only="true">Help</a></li>
                            </ul>
                            <h2>
                                Calendar
                            </h2>
                        </header>
                        <section class="container_6 clearfix">
                            <div id='calendar' class="grid_6"></div>
                        </section>
                    </div>

                </section>

<div id="create-event-form" title="Create new event">
    <label for="event-title">Event Title </label>
    <input type="text" name="event-title" id="event-title" style="width: 255px;" />
</div>
                <!-- Main Section End -->

            </div>
        </section>
    </div>
    
    <footer>
        <div id="footer-inner" class="container_8 clearfix">
            <div class="grid_8">
                <span class="fr"><a href="#">Documentation</a> | <a href="#">Feedback</a></span>Last account activity from 127.0.0.1 - <a href="#">Details</a> | &copy; 2011. All rights reserved. Theme design by VivantDesigns
            </div>
        </div>
    </footer>

</body>
</html>